<template>
    <div>
        <cu-navbar>
            <block slot="content">杜康文化</block>
        </cu-navbar>
        <view class="qiye-dongtai-page page">
            <div class="f-r a-c input-box">
                <u-search shape="square" :showAction="false" bgColor="#f8f8f8" v-model="searchValue" placeholder="请输入搜索内容" inputAlign="left" height="70rpx"></u-search>
            </div>
            <div class="art-user-list">
                <u-row gutter="10">
                    <u-col span="4" v-for="item in list" :key="item.id">
                        <div class="art-user-item" @click="toDetail(item)">
                            <u-avatar :src="item.src" style="margin: 30rpx auto; 0"></u-avatar>
                            <div class="username">{{ item.name }}</div>
                            <div class="desc">{{ item.desc }}</div>
                        </div>
                    </u-col>
                </u-row>
            </div>
        </view>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				list: []
			}
		},
		onLoad() {
			// 杜康动态
			this.$api.home(2).then(res => {
				this.list = res.result.painters.map(el => {
					return {
						src: el.pic,
						name: el.title,
						...el,
					}
				})
			})
		},
		methods: {
			toDetail(row) {
				uni.navigateTo({
					url: '/pages/art-user-list/content?id=' + row.id
				})
			}
		}
	}
</script>

<style lang="scss">
.qiye-dongtai-page {
	.input-box {
		background-color: #fff;
		padding: 20px;
	}
	.art-user-list {
		padding: 20px;
		.u-row {
			width: 100%;
		}
		.art-user-item {
			background-color: #fff;
			border-radius: 4px;
			text-align: center;
			padding: 0 20rpx 20rpx 20rpx;
			.username {
				font-size: 32rpx;
				margin-top: 10rpx;
				font-weight: bold;
			}
			.desc {
				font-size: 24rpx;
				margin-top: 16rpx;
				color: #ccc;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: keep-all;
				white-space: nowrap;
			}
		}
	}
}
</style>
